<template>
  <el-container class="body">
<!--    头部导航-->
    <el-header class="header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>
      <h4>新增二级商协议</h4>
    </el-header>
<!--    头部导航 end-->
    <el-main class="main">
<!--      分割线-->
      <el-divider class="split-line">
        <div class="title">
          <div class="title-number">1</div>
          <div class="title-txt">协议主体</div>
        </div>
      </el-divider>
<!--      分割线 end-->
<!--      协议主体-->
      <div class="content">
        <el-form ref="form" :model="form" label-width="80px">
          <el-row class="custom-row">
            <el-col :span="12">
              <el-form-item label="协议客户:">
                <el-row :gutter="10">
                  <el-col :span="5"><el-button size="mini" class="main-button">选择客户</el-button></el-col>
                  <el-col :span="18"><span>上海正也医药有限公司</span></el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="协议状态:">
                <el-row :gutter="10">
                  <el-col :span="8">
                    <el-select placeholder="协议状态" size="mini" value="">
                      <el-option label="正常" value="normal"></el-option>
                      <el-option label="异常" value="abnormal"></el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="购进指标:">
                <el-row :gutter="10">
                  <el-col :span="5">
                    <el-select placeholder="请输入金额/数量" size="mini" value="amount">
                      <el-option label="金额" value="amount"></el-option>
                      <el-option label="数量" value="quantity"></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="8">
                    <el-input size="mini" placeholder="输入金额/数量"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="纯销指标:">
                <el-row :gutter="10">
                  <el-col :span="5">
                    <el-select placeholder="请输入金额/数量" size="mini" value="amount">
                      <el-option label="金额" value="amount"></el-option>
                      <el-option label="数量" value="quantity"></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="8">
                    <el-input size="mini" placeholder="输入金额/数量"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="销售区域:">
                <el-row :gutter="10">
                  <el-col :span="5">
                    <el-button size="mini" class="main-button">选择区域</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-tag closable>全国</el-tag>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="签订时间:">
                <el-row :gutter="10">
                  <el-col :span="8">
                    <el-date-picker
                        size="mini"
                        v-model="value3"
                        type="datetime"
                        placeholder="选择日期时间"
                        default-time="12:00:00">
                    </el-date-picker>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="购进渠道:">
                <el-row :gutter="10">
                  <el-col :span="5">
                    <el-select placeholder="请输入金额/数量" size="mini" value="amount">
                      <el-option label="指定渠道" value="amount"></el-option>
                      <el-option label="固定渠道" value="quantity"></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="5">
                    <el-button size="mini" class="main-button">请选择渠道</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="main-table">
            <el-table
                size="mini"
                :data="tableData">
              <el-table-column prop="date" label="指定渠道编码"></el-table-column>
              <el-table-column prop="name" label="指定渠道名称"></el-table-column>
              <el-table-column prop="address" label="所在省"></el-table-column>
            </el-table>
          </el-row>
        </el-form>
      </div>
<!--      协议主体 end-->
<!--      分割线-->
      <el-divider class="split-line">
        <div class="title">
          <div class="title-number">2</div>
          <div class="title-txt">产品政策</div>
        </div>
      </el-divider>
<!--      分割线 end-->
<!--      产品政策-->
      <div class="product-policy">
<!--        header-->
        <el-row type="flex" align="middle" class="product-policy-header" :gutter="20">
          <el-col :span="2"><el-button type="primary" size="mini">添加产品</el-button></el-col>
          <el-col :span="22">
            <div class="display_flex">
              <div class="header-target"><span>购进总指标（万元）:</span><span>¥152.65</span></div>
              <div class="header-target"><span>指标按季度分解（万元）:</span><span>【Q1】¥12.11、【Q2】¥12.11、【Q3】¥12.11、【Q4】¥12.11</span></div>
              <div class="header-target"><span>纯销总指标（万元）:</span><span>¥152.65</span></div>
            </div>
          </el-col>
        </el-row>
<!--        header end-->
        <el-form :inline="true">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <el-row :gutter="20" type="flex" align="middle">
                <el-col :span="6">
                  <el-form-item label="产品:">
                    <el-button size="mini">选择产品</el-button>
                    <span class="product-name">美复胶丸24粒/盒</span>
                  </el-form-item>
                </el-col>
                <el-col :span="16">
                  <el-form-item label="协议效期:">
                    <el-date-picker size="mini" v-model="value1" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['12:00:00']">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <el-button size="mini" type="warning" plain>删除</el-button>
                </el-col>
              </el-row>
            </div>
            <div class="custom-body">
              <el-card class="box-card">
                <div slot="header" class="clearfix1">
                  <el-row class="card-name" type="flex" :gutter="10" justify="space-between">
                    <el-col :span="3">协议价(元)</el-col>
                    <el-col :span="3">票折(元)</el-col>
                    <el-col :span="3">购进指标量(大单位)</el-col>
                    <el-col :span="3">购进指标量(小单位)</el-col>
                    <el-col :span="3">购进金额(万元)</el-col>
                    <el-col :span="3">纯销指标量(小单位)</el-col>
                    <el-col :span="3">纯销指标金额(万元)</el-col>
                  </el-row>
                </div>
                <el-row type="flex" :gutter="10" justify="space-between">
                  <el-col :span="3">
                    <el-input placeholder="请输入" size="mini"></el-input>
                  </el-col>
                  <el-col :span="3">
                    <el-input placeholder="请输入" size="mini"></el-input>
                  </el-col>
                  <el-col :span="3">
                    <el-input placeholder="请输入" size="mini"></el-input>
                  </el-col>
                  <el-col :span="3">
                    <el-input placeholder="请输入" size="mini"></el-input>
                  </el-col>
                  <el-col :span="3">
                    <el-input placeholder="请输入" size="mini"></el-input>
                  </el-col>
                  <el-col :span="3">
                    <el-input placeholder="请输入" size="mini"></el-input>
                  </el-col>
                  <el-col :span="3">
                    <el-input placeholder="请输入" size="mini"></el-input>
                  </el-col>
                </el-row>
              </el-card>
              <el-card class="box-card">
                <div slot="header" class="clearfix1">
                  <el-row class="card-name" type="flex" :gutter="10" justify="space-between">
                    <el-col :span="3"> 分销奖励</el-col>
                    <el-col :span="3">费用科目</el-col>
                    <el-col :span="3">零售配送</el-col>
                    <el-col :span="3">费用科目</el-col>
                    <el-col :span="3">医疗配送商</el-col>
                    <el-col :span="3">费用科目</el-col>
                    <el-col :span="3">自定义7</el-col>
                    <el-col :span="3">自定义8</el-col>
                  </el-row>
                </div>
                <el-row type="flex" :gutter="10" justify="space-between">
                  <el-col :span="3">
                    <el-input placeholder="请输入" size="mini"></el-input>
                  </el-col>
                  <el-col :span="3">
                    <el-select placeholder="请输入金额/数量" size="mini" value="amount">
                      <el-option label="选项1" value="amount"></el-option>
                      <el-option label="选项2" value="quantity"></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="3">
                    <el-input placeholder="请输入" size="mini"></el-input>
                  </el-col>
                  <el-col :span="3">
                    <el-input placeholder="请输入" size="mini"></el-input>
                  </el-col>
                  <el-col :span="3">
                    <el-input placeholder="请输入" size="mini"></el-input>
                  </el-col>
                  <el-col :span="3">
                    <el-input placeholder="请输入" size="mini"></el-input>
                  </el-col>
                  <el-col :span="3">
                    <el-input placeholder="请输入" size="mini"></el-input>
                  </el-col>
                  <el-col :span="3">
                    <el-input placeholder="请输入" size="mini"></el-input>
                  </el-col>
                </el-row>
              </el-card>
            </div>
          </el-card>
        </el-form>
      </div>
<!--      产品政策 end-->
<!--      分割线-->
      <el-divider class="split-line">
        <div class="title">
          <div class="title-number">3</div>
          <div class="title-txt">补充协议</div>
        </div>
      </el-divider>
<!--      分割线 end-->
<!--      补充协议-->
      <div class="supplementary">
        <el-row type="flex" align="middle">
          <el-col :span="22">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
              <el-tab-pane label="补充协议1" name="first"></el-tab-pane>
              <el-tab-pane label="补充协议2" name="second"></el-tab-pane>
              <el-tab-pane label="补充协议3" name="third"></el-tab-pane>
            </el-tabs>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" size="mini">新增</el-button>
          </el-col>
        </el-row>
        <el-card class="box-card">
          <el-form>
            <el-row :gutter="20" type="flex" align="middle" style="padding-bottom: 5px;">
              <el-col :span="22">协议内容:</el-col>
              <el-col :span="2"><el-button size="mini" type="warning" plain>删除</el-button></el-col>
            </el-row>
            <el-input type="textarea"   :autosize="{ minRows: 5, maxRows: 5}" v-model="form.desc"></el-input>
          </el-form>
        </el-card>
      </div>
<!--      补充协议 end-->
    </el-main>
    <el-footer class="display_flex align-items_center">
      <el-button type="primary">保存</el-button>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  name: "pagesIndex",
  data() {
    return {
      form: {
        name: ""
      },
      tableData: [{
        date: 'BJ0000090',
        name: '宁波九州通药业有限公司',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: 'BJ0000090',
        name: '宁波九州通药业有限公司',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: 'BJ0000090',
        name: '宁波九州通药业有限公司',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: 'BJ0000090',
        name: '宁波九州通药业有限公司',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      activeName:"first",
      value3:"",
      value1:""
    }
  },
  methods:{
    handleClick(){}
  }
}
</script>

<style scoped lang="less">
//头部导航
.header {
  background-color: white;
  padding: 20px;
  height: 100px !important;
  border-bottom: 1px solid #ebebeb;
}
//内容
.main {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: rgb(244, 242, 242);
  display: flex;
  justify-content: center;
  flex-direction: column;
}
//标题
.split-line{
  height: 0;
  background-color: transparent;
  border-top: 1px dashed #e9e9e9;
  .title{
    display: flex;
    align-items: center;
  }
  .title-number{
    background-color: #409EFF;
    width: 20px;
    height: 20px;
    color: #ffffff;
    border-radius: 50%;
    text-align: center;
    margin-right: 5px;
  }
}
.main {
  .content {
    background-color: white;
    width: 100%;
    padding: 10px;
    border-radius: 10px;
  }
  .main-button{
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }
  .main-table{
    padding-left: 80px;
    width: 100%;
  }
  /deep/.el-table th.el-table__cell{background-color: #f8f8f8;}
  //产品政策
  /deep/.el-descriptions__body{background-color: transparent;}
  .product-policy{
    .product-policy-header{
      font-size: 12px;
      color: #676767;
      padding-bottom: 10px;
      .header-target{margin-right: 2rem;}
    }
    .product-name{
      color: #409eff;
      margin-left: 5px;
    }
    .box-card{
      margin-bottom: 10px;
      box-shadow:0 0 0 0;
    }
    .box-card:last-child{margin-bottom: 0;}
    .card-name{font-size: 12px;}
  }
}

.custom-row .el-col .el-form-item {
  margin-bottom: 0 !important;
}

.el-divider__text {
  background-color: rgb(244, 242, 242);
}

.el-card__header .el-form-item {
  margin-bottom: 0 !important;
}

.el-card__header {
  margin: 0 !important;
}

.custom-body /deep/ .el-card__header {
  padding: 5px !important;
  background-color: rgb(248, 246, 246) !important;
}

/deep/ .el-card__body {
  padding-top: 5px !important;
}

.supplementary{
  margin-bottom: 30px;
}
.supplementary /deep/ .el-tabs__header {
  margin-bottom: 0;
}

.supplementary /deep/ .el-tabs__nav {
  background-color: white;
}

.supplementary /deep/ .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border-bottom-color: rgb(248, 246, 246) !important;
}
</style>
